<script setup lang="ts">
  import {OverviewData} from "@/views/platform/platformType";
  import {onMounted, reactive} from "vue";
  import toBeAcceptedImg from '@/assets/platform/to-be-accepted.png';
  import toBeHandledImg from '@/assets/platform/to-be-handled.png';
  import overdueImg from '@/assets/platform/overdue.png';
  import toBeReportedImg from '@/assets/platform/to-be-reported.png';
  import {dataOverview} from "@/api/platform";

  const overviewList: OverviewData[] = reactive([
    {
      title: '待接收任务',
      count: 0,
      backgroundImgSrc: toBeAcceptedImg
    },
    {
      title: '待办理任务',
      count: 0,
      backgroundImgSrc: toBeHandledImg
    },
    {
      title: '逾期任务',
      count: 0,
      backgroundImgSrc: overdueImg
    },
    {
      title: '待上报任务',
      count: 0,
      backgroundImgSrc: toBeReportedImg
    },
  ]);

  onMounted(async () => {
    const response = await dataOverview();
    overviewList[0].count = response.data.djsrw;
    overviewList[1].count = response.data.dblrw;
    overviewList[2].count = response.data.dsb;
    overviewList[3].count = response.data.yqrw;
  });
</script>

<template>
  <div class="component-wrap">
    <div class="title">数据预览</div>
    <div class="list">
      <div v-for="overviewItem in overviewList" :key="overviewItem.backgroundImgSrc" class="item" :style="{backgroundImage: `url(${overviewItem.backgroundImgSrc})`}">
          <div class="count">{{ overviewItem.count }}</div>
          <div class="item-title">{{ overviewItem.title }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "dataOverview"
}
</script>

<style scoped lang="scss">
.component-wrap{
  background-color: #FFFFFF;
  padding: 1rem;
}
.title{
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.list{
  display: flex;
  flex-wrap: wrap;
}
.item{
  flex-basis: 30%;
  flex-grow: 1;
  margin-bottom: 0.5rem;
  padding: 1rem;
  color: #FFFFFF;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: 1px solid transparent;
  border-radius: 1rem;
  &:nth-child(odd){
    margin-right: 0.5rem;
  }
  &:nth-child(3){
    margin-bottom: 0;
  }
  &:nth-child(4){
    margin-bottom: 0;
  }
}
.count{
  margin-bottom: 0.5rem;
}
.item-title{
  font-size: 0.8rem;
}
</style>